<template>
  <!-- 首页 -->
  <div class="documet">
    <navigation id="navbar"></navigation>
    <swiper></swiper>
    <allblogs @pageChange="pageChange" :articlesList="articlesList" :count="count"></allblogs>
    <bottoms></bottoms>
  </div>
</template>

<script>
import Navigation from '../../components/navigation/Navigation'
import Swiper from '../../components/swiper/Swiper'
import Bottoms from '../../components/bottoms/Bottoms'
import Allblogs from './childcomps/Allblogs'
import { allBlogs } from '../../network/blogs'

export default {
  name: 'Home',
  data() {
    return {
      //首页博客数据
      articlesList: [],
      count: 0,
      pageData: {
        total: 0,
        page: 1,
        size: 12
      }
    }
  },
  components: {
    Navigation,
    Swiper,
    Bottoms,
    Allblogs
  },
  created() {
    this.allBlogs()
  },
  methods: {
    //获取博客全部数据
    allBlogs() {
      allBlogs(this.pageData.page, this.pageData.size).then(res => {
        if (res.code === 200) {
          this.articlesList = res.data.rows
          this.count = res.data.count
        }
      })
    },
    pageChange(newPage) {
      this.pageData.page = newPage
      this.allBlogs()
      document.documentElement.scrollTop = document.body.offsetHeight
    }
  }
}
</script>

<style>
#navbar {
  min-width: 1300px;
  position: fixed;
  z-index: 9;
}
.documet {
  background-color: #dce2da;
}
</style>